<template>
	<MkPanel title="输血申请单">
		<template #header>
			<div class="transfusion-input">
				<el-input ref="inpRef" v-model.trim="ctx.inputShenQingDan" clearable @keyup.enter.native="enterDanHao"
					placeholder="输入申请单号回车" class="danHaoInput" v-if="isEdit" />
			</div>
			<div class="transfusion-bill">输血申请单
				<span class="order-number"> {{ traShenQingDan.traShenQing?.id }} </span>
			</div>
			<MkHuanZheLiShi :huanZheId="traShenQingHuanZhe.huanZheId" :zhuYuanHao="traShenQingHuanZhe.zhuYuanHao"
				ref="liShiRef" />
		</template>
		<MkForm :col="4" formId="traHuanZheXinXi">
			<MkPatient v-model="traShenQingHuanZhe" form-name="输血申请患者信息" :isEdit="false" />
			<MkDescription>
				<MkDescriptionItem label="Rh分型"> </MkDescriptionItem>
				<MkDescriptionItem label="抗筛"> </MkDescriptionItem>
				<MkDescriptionItem label="诊断"> {{ traShenQingHuanZhe.linChuangZhenDuan }}
				</MkDescriptionItem>
				<MkDescriptionItem label="身高(cm)"> {{ traShenQingHuanZhe.shenGao }}
				</MkDescriptionItem>
				<MkDescriptionItem label="体重(kg)"> {{ traShenQingHuanZhe.tiZhong }}
				</MkDescriptionItem>
				<MkDescriptionItem label="输血史"> {{ traShenQingHuanZhe.shuXueShi }}
				</MkDescriptionItem>
				<MkDescriptionItem label="输血反应史"> {{ traShenQingHuanZhe.shuXueFanYingShi }}
				</MkDescriptionItem>
				<MkDescriptionItem label="移植史"> {{ traShenQingHuanZhe.yiZhiShi }}
				</MkDescriptionItem>
				<MkDescriptionItem label="孕产史"> {{ traShenQingHuanZhe.yunChanShi }}
				</MkDescriptionItem>
			</MkDescription>
			<MkDescription>
				<MkDescriptionItem label="申请血型">
					<span style="font-size: large; color:orange"> {{ traShenQingDan.traShenQingYongXue?.shenQingABO }} {{
						traShenQingDan.traShenQingYongXue?.shenQingRhD }} </span>
				</MkDescriptionItem>
				<MkDescriptionItem label="用血类型"> {{ traShenQingDan.traShenQingYongXue?.yongXueLeiXing }} </MkDescriptionItem>
				<MkDescriptionItem label="输血目的"> {{ traShenQingDan.traShenQingYongXue?.shuXueMuDi }} </MkDescriptionItem>
				<MkDescriptionItem label="用血备注"> {{ traShenQingDan.traShenQingYongXue?.yongXueBeiZhu }} </MkDescriptionItem>
				<MkDescriptionItem label="历史备注"> {{ traShenQingDan.traShenQing?.remark }} </MkDescriptionItem>
			</MkDescription>
			<MkDescription>
				<MkDescriptionItem label="申请成分">
					{{ getChengFen(traShenQingDan.traShenQingYongXue?.shenQingPinZhong,
						traShenQingDan.traShenQingYongXue?.shenQingLiang) }}
				</MkDescriptionItem>
				<MkDescriptionItem label="计划用血时间">{{ timeFormat(traShenQingDan.traShenQingYongXue?.yongXueShiJian) }}
				</MkDescriptionItem>
				<template v-if="traShenQingDan.traShenQingYongXue?.shenQingDuoPinZhong">
					<MkDescriptionItem label="申请成分2">
						{{ getChengFen(traShenQingDan.traShenQingYongXue?.shenQingPinZhong2,
							traShenQingDan.traShenQingYongXue?.shenQingLiang2) }}
					</MkDescriptionItem>
					<MkDescriptionItem label="计划用血时间2"> {{ timeFormat(traShenQingDan.traShenQingYongXue?.yongXueShiJian2) }}
					</MkDescriptionItem>
					<MkDescriptionItem label="申请成分3">
						{{ getChengFen(traShenQingDan.traShenQingYongXue?.shenQingPinZhong3,
							traShenQingDan.traShenQingYongXue?.shenQingLiang3) }}
					</MkDescriptionItem>
					<MkDescriptionItem label="计划用血时间3"> {{ timeFormat(traShenQingDan.traShenQingYongXue?.yongXueShiJian3) }}
					</MkDescriptionItem>
				</template>
			</MkDescription>
		</MkForm>
	</MkPanel>
</template>
<script lang="ts" setup>
/* 患者信息
通过传入申请单号获取患者信息,申请血液信息等显示
考虑获取申请单信息后把信息传给主界面使用
*/
import { ElInput } from 'element-plus';
import { TraShenQingApi, TraShenQingDanOutput } from '/@/api/tra/TraShenQing';
import { getXueYePinZhongInfo } from '/@/stores/baseInfo/';
import { isNull, timeFormat } from '/@/utils';


defineOptions({
	name: 'MkShenQingDan',
});

const props = defineProps({
	isEdit: { // 编辑时显示申请单扫码框,扫码后获取申请单信息
		type: Boolean,
		default: false,
	},
	shenQingDanId: {
		type: String // 申请单号
	},
})

const ctx = reactive({
	inputShenQingDan: undefined as string | undefined, // 输入框填写的申请单号
	isShowInput: false, // 是否显示申请单输入框
	isLoading: false, // 加载申请单信息时
})
const liShiRef = ref()


const traShenQingDan = ref({ traShenQingHuanZhe: {} } as TraShenQingDanOutput);

const traShenQingHuanZhe = computed(() => traShenQingDan.value.traShenQingHuanZhe);
/** 获取申请成分字符串 */
const getChengFen = (pinZhongId: number | undefined, shengQingLiang: number | undefined) => {
	if (!pinZhongId) return ''
	let rongLiang = isNull(shengQingLiang) ? '' : shengQingLiang
	const pinZhongInfo = getXueYePinZhongInfo(pinZhongId)
	if (!pinZhongInfo) {
		return `${pinZhongId} ${rongLiang}`
	}
	rongLiang = isNull(shengQingLiang) ? '' : `${shengQingLiang}${pinZhongInfo.danWei}`
	return `${pinZhongInfo.mingCheng} ${rongLiang}`
}
/** 获取患者的历史次数 */
const getHuanZheLiShiCiShu = () => {
	liShiRef.value?.getLiShiCiShu()
}
/** 回车申请单号 */
const enterDanHao = () => {
	if (!ctx.inputShenQingDan) return
	loadShenQingDan(ctx.inputShenQingDan).catch(() => {
		ctx.inputShenQingDan = undefined
	})
}
// 通过申请单号加载申请单信息
const loadShenQingDan = async (id: string): Promise<TraShenQingDanOutput> => {
	ctx.isLoading = true
	let billInfo = await TraShenQingApi.get(id).finally(() => ctx.isLoading = false);
	traShenQingDan.value = billInfo;
	// 申请单信息带出后把申请单输入框隐藏
	ctx.inputShenQingDan = undefined
	ctx.isShowInput = false
	// 获取患者历史次数
	nextTick(() => {
		getHuanZheLiShiCiShu()
	})
	// 把申请单信息传出
	emits('loadFinished', billInfo)
	return billInfo;
};

let emits = defineEmits(['loadFinished']);
defineExpose({ loadShenQingDan })
</script>
<style lang="scss" scoped>
.transfusion-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.transfusion-input {
	display: flex;
	align-items: center;

	.danHaoInput {
		width: 150px;
		margin-left: 1rem;
	}
}

.transfusion-bill {
	font-size: 1.1rem;
}

.order-number {
	padding-left: 1.25rem;
	color: #000;
}

.tag-container {
	display: flex;
	gap: 0.5rem;
}
</style>
